<!--计算属性 computed-->
<script setup>
import {ref} from 'vue'
import {computed} from 'vue'

const arr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
// 计算函数 返回计算的结果
const newArr = computed(() => {
  return arr.value.filter(item => item % 2 === 0)
})
// 修改数组的方法
const changeArr = () =>{
  arr.value.push(666)
}
// 和方法不同，如果值没有改变，只会执行一次，方法是每次都执行
const now = computed(() => Date.now())

// get和set

const firstName = ref("张")
const lastName = ref("飞")
const fullName = computed({
  get() {
    return firstName.value + lastName.value
  },
  // 设置新名字，上面的响应式姓和名也跟着改
  set(val) {
    console.log(val)
    firstName.value = val[0]
    lastName.value = val[1]
  }
})
const changeFirst = ()=>{
  fullName.value = "刘备"
}

</script>
<template>
  <div>
    {{ arr }}
    <hr>
    计算后的值 {{ newArr }}

    <button @click="changeArr">修改数据</button>

    {{now}}
    <hr>
    下面是get和set用法
    原先名字：{{fullName}}
    <button @click="changeFirst">改名</button>
  </div>
</template>
